<template>
  <div class="document-preview">
    <div class="preview-header">
      <div class="document-info">
        <div class="document-icon" :class="document.type">
          <el-icon>
            <Document v-if="document.type === 'pdf'" />
            <Reading v-else-if="document.type === 'doc'" />
            <Present v-else-if="document.type === 'ppt'" />
            <Picture v-else />
          </el-icon>
        </div>
        <div class="document-details">
          <h3 class="document-title">{{ document.title }}</h3>
          <div class="document-meta">
            <el-tag size="small" :color="getProjectColor(document.project)">
              {{ document.project }}
            </el-tag>
            <span class="meta-item">
              <el-icon><User /></el-icon>
              {{ document.author }}
            </span>
            <span class="meta-item">
              <el-icon><Calendar /></el-icon>
              {{ formatDate(document.updateTime) }}
            </span>
            <span class="meta-item">
              <el-icon><Document /></el-icon>
              {{ document.size }}
            </span>
            <span class="meta-item">
              <el-icon><View /></el-icon>
              {{ document.usageCount }} 次查看
            </span>
          </div>
        </div>
      </div>
      
      <div class="preview-actions">
        <el-button @click="downloadDocument">
          <el-icon><Download /></el-icon>
          下载
        </el-button>
        <el-button @click="shareDocument">
          <el-icon><Share /></el-icon>
          分享
        </el-button>
        <el-button type="primary" @click="openDocument">
          <el-icon><FolderOpened /></el-icon>
          打开文件夹
        </el-button>
      </div>
    </div>

    <div class="preview-content">
      <!-- 文档预览区域 -->
      <div class="preview-area">
        <div class="preview-placeholder">
          <div class="placeholder-icon" :class="document.type">
            <el-icon>
              <Document v-if="document.type === 'pdf'" />
              <Reading v-else-if="document.type === 'doc'" />
              <Present v-else-if="document.type === 'ppt'" />
              <Picture v-else />
            </el-icon>
          </div>
          <h4>{{ getFileTypeName(document.type) }} 文档预览</h4>
          <p class="preview-description">{{ document.description }}</p>
          <div class="preview-tips">
            <el-icon><InfoFilled /></el-icon>
            <span>实际开发中，这里将显示文档的真实预览内容</span>
          </div>
        </div>
      </div>

      <!-- 文档信息侧边栏 -->
      <div class="preview-sidebar">
        <!-- 文档标签 -->
        <div class="info-section">
          <h4 class="section-title">文档标签</h4>
          <div class="tags-container">
            <el-tag
              v-for="tag in document.tags"
              :key="tag"
              type="info"
              size="small"
              class="tag-item"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>

        <!-- 文档描述 -->
        <div class="info-section">
          <h4 class="section-title">文档描述</h4>
          <p class="document-description">
            {{ document.description || '暂无描述' }}
          </p>
        </div>

        <!-- 文档属性 -->
        <div class="info-section">
          <h4 class="section-title">文档属性</h4>
          <div class="properties-list">
            <div class="property-item">
              <span class="property-label">文件类型</span>
              <span class="property-value">{{ getFileTypeName(document.type) }}</span>
            </div>
            <div class="property-item">
              <span class="property-label">文件大小</span>
              <span class="property-value">{{ document.size }}</span>
            </div>
            <div class="property-item">
              <span class="property-label">创建时间</span>
              <span class="property-value">{{ formatDate(document.createTime) }}</span>
            </div>
            <div class="property-item">
              <span class="property-label">修改时间</span>
              <span class="property-value">{{ formatDate(document.updateTime) }}</span>
            </div>
            <div class="property-item">
              <span class="property-label">上传者</span>
              <span class="property-value">{{ document.author }}</span>
            </div>
            <div class="property-item">
              <span class="property-label">文件路径</span>
              <span class="property-value">{{ document.filePath }}</span>
            </div>
          </div>
        </div>

        <!-- 使用历史 -->
        <div class="info-section">
          <h4 class="section-title">使用历史</h4>
          <div class="usage-stats">
            <div class="stat-item">
              <div class="stat-value">{{ document.usageCount }}</div>
              <div class="stat-label">总查看次数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ getRecentUsage() }}</div>
              <div class="stat-label">本周查看</div>
            </div>
          </div>
        </div>

        <!-- 相关文档 -->
        <div class="info-section">
          <h4 class="section-title">相关文档</h4>
          <div class="related-documents">
            <div
              v-for="relatedDoc in getRelatedDocuments()"
              :key="relatedDoc.id"
              class="related-item"
              @click="$emit('preview', relatedDoc)"
            >
              <div class="related-icon" :class="relatedDoc.type">
                <el-icon>
                  <Document v-if="relatedDoc.type === 'pdf'" />
                  <Reading v-else-if="relatedDoc.type === 'doc'" />
                  <Present v-else-if="relatedDoc.type === 'ppt'" />
                  <Picture v-else />
                </el-icon>
              </div>
              <div class="related-info">
                <div class="related-title">{{ relatedDoc.title }}</div>
                <div class="related-meta">{{ relatedDoc.size }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useDocumentStore } from '@/store/document'
import { useProjectStore } from '@/store/project'
import { ElMessage } from 'element-plus'
import {
  Document, Reading, Present, Picture, User, Calendar,
  View, Download, Share, FolderOpened, InfoFilled
} from '@element-plus/icons-vue'

// Props
const props = defineProps({
  document: {
    type: Object,
    required: true
  }
})

// Emits
const emit = defineEmits(['preview'])

// Stores
const documentStore = useDocumentStore()
const projectStore = useProjectStore()

// Methods
const getFileTypeName = (type) => {
  const typeNames = {
    pdf: 'PDF 文档',
    doc: 'Word 文档',
    ppt: 'PowerPoint 演示文稿',
    img: '图片文件'
  }
  return typeNames[type] || '未知格式'
}

const formatDate = (dateStr) => {
  if (!dateStr) return '未知'
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const getProjectColor = (projectName) => {
  const project = projectStore.projects.find(p => p.name === projectName)
  return project ? project.color : '#909399'
}

const getRecentUsage = () => {
  // 模拟本周使用次数
  return Math.floor(props.document.usageCount * 0.3)
}

const getRelatedDocuments = () => {
  // 获取同项目或同标签的相关文档
  const related = documentStore.documents
    .filter(doc => 
      doc.id !== props.document.id && (
        doc.projectId === props.document.projectId ||
        doc.tags.some(tag => props.document.tags.includes(tag))
      )
    )
    .slice(0, 3)
  
  return related
}

const downloadDocument = () => {
  ElMessage.success(`开始下载：${props.document.title}`)
  // 实际开发中这里会触发真实的下载
}

const shareDocument = () => {
  // 复制分享链接到剪贴板
  const shareUrl = `${window.location.origin}/document/${props.document.id}`
  navigator.clipboard.writeText(shareUrl).then(() => {
    ElMessage.success('分享链接已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败，请手动复制链接')
  })
}

const openDocument = () => {
  ElMessage.info('在实际环境中将打开文件所在文件夹')
  // 实际开发中这里会调用系统API打开文件夹
}
</script>

<style lang="scss" scoped>
.document-preview {
  height: 600px;
  display: flex;
  flex-direction: column;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--el-border-color-lighter);
  margin-bottom: 20px;
  
  .document-info {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    
    .document-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;
      flex-shrink: 0;
      
      &.pdf {
        background: linear-gradient(135deg, #f56c6c, #f78989);
      }
      
      &.doc {
        background: linear-gradient(135deg, #409eff, #66b1ff);
      }
      
      &.ppt {
        background: linear-gradient(135deg, #e6a23c, #ebb563);
      }
      
      &.img {
        background: linear-gradient(135deg, #67c23a, #85ce61);
      }
    }
    
    .document-details {
      .document-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin-bottom: 12px;
        line-height: 1.2;
      }
      
      .document-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
        
        .meta-item {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 14px;
          color: var(--el-text-color-secondary);
          
          .el-icon {
            font-size: 14px;
          }
        }
      }
    }
  }
  
  .preview-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
  }
}

.preview-content {
  display: flex;
  gap: 20px;
  flex: 1;
  overflow: hidden;
  
  .preview-area {
    flex: 1;
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    background: var(--el-fill-color-lighter);
    display: flex;
    align-items: center;
    justify-content: center;
    
    .preview-placeholder {
      text-align: center;
      padding: 40px;
      
      .placeholder-icon {
        width: 80px;
        height: 80px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        color: white;
        margin: 0 auto 20px;
        
        &.pdf {
          background: linear-gradient(135deg, #f56c6c, #f78989);
        }
        
        &.doc {
          background: linear-gradient(135deg, #409eff, #66b1ff);
        }
        
        &.ppt {
          background: linear-gradient(135deg, #e6a23c, #ebb563);
        }
        
        &.img {
          background: linear-gradient(135deg, #67c23a, #85ce61);
        }
      }
      
      h4 {
        font-size: 18px;
        color: var(--el-text-color-primary);
        margin-bottom: 12px;
      }
      
      .preview-description {
        font-size: 14px;
        color: var(--el-text-color-secondary);
        line-height: 1.5;
        margin-bottom: 20px;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
      }
      
      .preview-tips {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 12px;
        color: var(--el-text-color-placeholder);
        
        .el-icon {
          font-size: 14px;
        }
      }
    }
  }
  
  .preview-sidebar {
    width: 280px;
    flex-shrink: 0;
    overflow-y: auto;
    
    .info-section {
      margin-bottom: 24px;
      
      .section-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--el-border-color-lighter);
      }
    }
    
    .tags-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      
      .tag-item {
        margin: 0;
      }
    }
    
    .document-description {
      font-size: 14px;
      color: var(--el-text-color-secondary);
      line-height: 1.5;
      margin: 0;
    }
    
    .properties-list {
      .property-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 8px 0;
        border-bottom: 1px solid var(--el-border-color-extra-light);
        
        &:last-child {
          border-bottom: none;
        }
        
        .property-label {
          font-size: 14px;
          color: var(--el-text-color-secondary);
          width: 80px;
          flex-shrink: 0;
        }
        
        .property-value {
          font-size: 14px;
          color: var(--el-text-color-primary);
          text-align: right;
          word-break: break-all;
        }
      }
    }
    
    .usage-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      
      .stat-item {
        text-align: center;
        padding: 16px;
        background: var(--el-fill-color-light);
        border-radius: 8px;
        
        .stat-value {
          font-size: 20px;
          font-weight: 600;
          color: var(--el-color-primary);
          margin-bottom: 4px;
        }
        
        .stat-label {
          font-size: 12px;
          color: var(--el-text-color-secondary);
        }
      }
    }
    
    .related-documents {
      .related-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.2s;
        
        &:hover {
          background: var(--el-fill-color-light);
        }
        
        .related-icon {
          width: 32px;
          height: 32px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          color: white;
          flex-shrink: 0;
          
          &.pdf {
            background: var(--el-color-danger);
          }
          
          &.doc {
            background: var(--el-color-primary);
          }
          
          &.ppt {
            background: var(--el-color-warning);
          }
          
          &.img {
            background: var(--el-color-success);
          }
        }
        
        .related-info {
          flex: 1;
          min-width: 0;
          
          .related-title {
            font-size: 14px;
            color: var(--el-text-color-primary);
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          
          .related-meta {
            font-size: 12px;
            color: var(--el-text-color-secondary);
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .preview-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    
    .preview-actions {
      justify-content: flex-end;
    }
  }
  
  .preview-content {
    flex-direction: column;
    
    .preview-sidebar {
      width: 100%;
    }
  }
}
</style>